﻿@page "/chart/percent-stacked-area"

@using Syncfusion.Blazor
@using ThemeHelper
@using Syncfusion.Blazor.Charts

@inject NavigationManager NavigationManager
@inherits SampleBaseComponent;

<SampleDescription>
    <p>This <a target='_blank' href='https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/100-stacked-area-chart'>Blazor 100% Stacked Area Chart</a> example visualizes percentage of sales for four ethical products with default 100% stacked area series in the chart. Legend in the sample shows the information about the series.</p>
</SampleDescription>
<ActionDescription>
    <p>In this example, you can see how to render and configure the 100% stacked area type chart. It displays multiple series of data as stacked areas, ensuring that the cumulative proportion of each stacked element always totals 100%.</p>
    <p>More information about the 100% stacked area series can be found in this <a target='_blank' href='https://blazor.syncfusion.com/documentation/chart/chart-types/stack-area'>documentation section</a>.</p>
</ActionDescription>

<div class="control-section">
    <SfChart Title="Trend in sales of ethical products" Theme="@Theme">
        <ChartArea><ChartAreaBorder Width="0"></ChartAreaBorder></ChartArea>
        <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.DateTime" LabelFormat="yyyy" IntervalType="IntervalType.Years" EdgeLabelPlacement="EdgeLabelPlacement.Shift">
            <ChartAxisMajorGridLines Width="0"></ChartAxisMajorGridLines>
        </ChartPrimaryXAxis>
        <ChartPrimaryYAxis Title="Spends" Interval="20">
            <ChartAxisMajorTickLines Width="0"></ChartAxisMajorTickLines>
            <ChartAxisLineStyle Width="0"></ChartAxisLineStyle>
        </ChartPrimaryYAxis>
        <ChartSeriesCollection>
            <ChartSeries DataSource="@ChartPoints" Name="Organic" XName="Period" Width="2"
                         Opacity="1" YName="OrganicSales" Type="ChartSeriesType.StackingArea100">
            </ChartSeries>
            <ChartSeries DataSource="@ChartPoints" Name="Fair-trade" XName="Period" Width="2"
                         Opacity="1" YName="FairTradeSales" Type="ChartSeriesType.StackingArea100">
            </ChartSeries>
            <ChartSeries DataSource="@ChartPoints" Name="Veg Alternatives" XName="Period" Width="2"
                         Opacity="1" YName="VegAlternativesSales" Type="ChartSeriesType.StackingArea100">
            </ChartSeries>
            <ChartSeries DataSource="@ChartPoints" Name="Others" XName="Period" Width="2"
                         Opacity="1" YName="OtherSales" Type="ChartSeriesType.StackingArea100">
            </ChartSeries>
        </ChartSeriesCollection>
    </SfChart>
</div>

@code{

    private Theme Theme { get; set; }
    public List<StackedAreaChartData> ChartPoints { get; set; } = new List<StackedAreaChartData>
    {
        new StackedAreaChartData { Period = new DateTime(2000, 01, 01), OrganicSales = 0.61, FairTradeSales = 0.03, VegAlternativesSales = 0.48, OtherSales = 0.23 },
        new StackedAreaChartData { Period = new DateTime(2001, 01, 01), OrganicSales = 0.81, FairTradeSales = 0.05, VegAlternativesSales = 0.53, OtherSales = 0.17 },
        new StackedAreaChartData { Period = new DateTime(2002, 01, 01), OrganicSales = 0.91, FairTradeSales = 0.06, VegAlternativesSales = 0.57, OtherSales = 0.17 },
        new StackedAreaChartData { Period = new DateTime(2003, 01, 01), OrganicSales = 1.00, FairTradeSales = 0.09, VegAlternativesSales = 0.61, OtherSales = 0.20 },
        new StackedAreaChartData { Period = new DateTime(2004, 01, 01), OrganicSales = 1.19, FairTradeSales = 0.14, VegAlternativesSales = 0.63, OtherSales = 0.23 },
        new StackedAreaChartData { Period = new DateTime(2005, 01, 01), OrganicSales = 1.47, FairTradeSales = 0.20, VegAlternativesSales = 0.64, OtherSales = 0.36 },
        new StackedAreaChartData { Period = new DateTime(2006, 01, 01), OrganicSales = 1.74, FairTradeSales = 0.29, VegAlternativesSales = 0.66, OtherSales = 0.43 },
        new StackedAreaChartData { Period = new DateTime(2007, 01, 01), OrganicSales = 1.98, FairTradeSales = 0.46, VegAlternativesSales = 0.76, OtherSales = 0.51 },
        new StackedAreaChartData { Period = new DateTime(2008, 01, 01), OrganicSales = 1.99, FairTradeSales = 0.64, VegAlternativesSales = 0.77, OtherSales = 0.72 },
        new StackedAreaChartData { Period = new DateTime(2009, 01, 01), OrganicSales = 1.70, FairTradeSales = 0.75, VegAlternativesSales = 0.55, OtherSales = 1.29 },
        new StackedAreaChartData { Period = new DateTime(2010, 01, 01), OrganicSales = 1.48, FairTradeSales = 1.06, VegAlternativesSales = 0.54, OtherSales = 1.38 },
        new StackedAreaChartData { Period = new DateTime(2011, 01, 01), OrganicSales = 1.38, FairTradeSales = 1.25, VegAlternativesSales = 0.57, OtherSales = 1.82 },
        new StackedAreaChartData { Period = new DateTime(2012, 01, 01), OrganicSales = 1.66, FairTradeSales = 1.55, VegAlternativesSales = 0.61, OtherSales = 2.16 },
        new StackedAreaChartData { Period = new DateTime(2013, 01, 01), OrganicSales = 1.66, FairTradeSales = 1.55, VegAlternativesSales = 0.67, OtherSales = 2.51 },
        new StackedAreaChartData { Period = new DateTime(2014, 01, 01), OrganicSales = 1.67, FairTradeSales = 1.65, VegAlternativesSales = 0.67, OtherSales = 2.61 }
    };

    protected override void OnInitialized()
    {
        Theme = ThemeHelper.GetCurrentTheme(NavigationManager.Uri);
    }

    public class StackedAreaChartData
    {
        public DateTime Period { get; set; }
        public double OrganicSales { get; set; }
        public double FairTradeSales { get; set; }
        public double VegAlternativesSales { get; set; }
        public double OtherSales { get; set; }
    }

}
